<template>
  <div class="contianerBox">
    <div class="left">
      <router-view></router-view>
    </div>
    <div class="right">
      <addforum>
        <div class="publishArticle gap" @click="openDddforum"><i class="el-icon-document-copy"></i><span>发布文章</span></div>
      </addforum>
      <div class="gap">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-s-data color"></i> 热帖排行</span>
          </div>
          <div v-for="item in hotList" :key="item.post_id" class="text item">
            <div class="top text-ellipsis">{{ item.title }}</div>
            <div class="footer">
              <div></div>
              <div class="time">{{ item.publish_time.replace("T",' ') }}</div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="gap">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-chat-dot-round color"></i> 热门话题</span>
          </div>
          <div v-for="item in subjects" :key="item.subjectId" class="text item">
            <div class="subjects">#{{ item.subjectName }}#</div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import addforum from '../bafor_forum/cpn/addforum.vue'
import { getHotSort } from '@/api/post'
import { getSubject } from '@/api/subject'
export default {
  components: {
    addforum
  },
  data() {
    return {
      // subjeList: [],
      hotList: [],
      subjects: []
    }
  },
  methods: {
    openDddforum() {}
  },
  mounted() {
    // getSubject().then(res => {
    //   this.subjeList = res.data
    // })
    getHotSort().then(res => {
      this.hotList = res.data.hotList
      this.subjects = res.data.subjects
    })
  }
}
</script>

<style lang="less" scoped>
.contianerBox {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  .left {
    width: 70%;
  }
  .right {
    width: 28%;
    .gap {
      margin-bottom: 20px;
      span {
        font-weight: 700;
      }
      .text {
        padding: 10px;
        .top {
          line-height: 28px;
          font-size: 14px;
          cursor: pointer;
          margin-bottom: 10px;
          &:hover {
            color: @Cambridge_orange;
          }
        }
        .footer {
          display: flex;
          color: #ccc;
          justify-content: space-between;
          .time {
            font-size: 12px;
          }
        }
      }

      .subjects {
        padding: 5px 0;
        cursor: pointer;
        &:hover {
          color: @Cambridge_orange;
        }
      }
    }
    .publishArticle {
      width: 100%;
      text-align: center;
      cursor: pointer;
      height: 50px;
      line-height: 50px;
      border-radius: 5px;
      color: @background_color;
      background-color: #1058fa;
      font-size: 20px;
    }
  }
}
.clearfix {
  .color {
    color: rgb(16, 88, 250);
  }
}
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
</style>